<template>
  <div class="mt-2">
    <div v-for="item in list" :key="item.id">
      <div class="flex justify-between py-2 px-4" v-ripple>
        <div @click="toXiangXi(item.id)" class="cursor-pointer flex-1">
          <div class="text-title">{{ item.title }}</div>
          <div class="text-subtitle">{{ item.createTime }}</div>
        </div>
        <div class="flex gap-x-2 items-center">
          <v-btn aria-label="编辑歌单名称" :elevation="0" variant="text" icon @click="handleEdit(item.id)"
            ><j-icon size="20">mdi-book-edit-outline</j-icon></v-btn
          >
          <v-btn
            :elevation="0"
            icon
            variant="text"
            @click="confirmVisbleShow(item.id)"
            color="grand lighten-1"
            aria-label="删除"
          >
            <j-icon size="20">mdi-trash-can-outline</j-icon>
          </v-btn>
        </div>
      </div>
    </div>
  </div>
  <jc-confirmation-box
    :show="confirmVisble"
    @jcchange="handleConfirmationBoxChange"
    @confirm="handleDelete"
    msg="确认要删除这个歌单吗？"
  ></jc-confirmation-box>
  <new-gen-dan
    :visbale="newGenDanVisbale"
    @jcchange="handleNewGenDanChange"
    type="edit"
    :id="editId"
    :value="editTitle"
    @submit="$emit('removeitem')"
  ></new-gen-dan>
</template>
<script>
import { alert } from "@/utils/utils";
import { gedanController } from "@/api/cloudbase-user-action-log";
import JcConfirmationBox from "@/jcui/JcConfirmationBox/index.vue";
import NewGenDan from "./NewGenDan";

export default {
  name: "GeDanList",
  components: { NewGenDan, JcConfirmationBox },
  props: {
    list: {
      type: Array,
      default: () => [],
    },
  },
  computed: {},
  data() {
    return {
      confirmVisble: false,
      newGenDanVisbale: false,
      editId: "",
      editTitle: "",
      selectId: "",
    };
  },

  methods: {
    handleDown() {
      console.log("a标签加载事件");
      alert({ type: "info", msg: "文件下载中...请耐心等待" });
    },
    toXiangXi(id) {
      console.log("详情");
      this.$router.push({ name: "GeDanList", params: { id } });
    },
    handleDelete() {
      this.$jcLoading.show();
      const id = this.selectId;
      gedanController
        .remove(id)
        .then(() => {
          this.$emit("removeitem", id);
          this.$jcLoading.close();
          this.$toast.success("删除成功");
        })
        .catch(() => {
          this.$jcLoading.close();
        });
    },
    handleEdit(id) {
      console.log("编辑", id, this.list);
      this.newGenDanVisbale = true;
      this.editId = id;
      this.editTitle = this.list.find((i) => i.id === id).title;
    },
    handleConfirmationBoxChange(val) {
      this.confirmVisble = val;
    },
    // 删除确认框的显示与隐藏
    confirmVisbleShow(id) {
      this.selectId = id;
      this.selectedItem = id;
      this.confirmVisble = true;
    },
    handleNewGenDanChange(val) {
      this.newGenDanVisbale = val;
    },
  },
};
</script>

<style scoped></style>
